<template>
	<!-- 功能区域 -->
	<div class="function">
		<el-row :gutter="20">
			<el-col :span="12">
				<div class="left">
					<Hitokoto />
					<!-- <Music /> -->
				</div>
			</el-col>
			<el-col :span="12">
				<div class="right cards">
					<div class="time">
						<div class="date">
							<span>{{ currentTime.year }}&nbsp;年&nbsp;</span>
							<span>{{ currentTime.month }}&nbsp;月&nbsp;</span>
							<span>{{ currentTime.day }}&nbsp;日&nbsp;</span>
							<span class="sm-hidden">{{ currentTime.weekday }}</span>
						</div>
						<div class="text">
							<span> {{ currentTime.hour }}:{{ currentTime.minute }}:{{ currentTime.second }}</span>
						</div>
					</div>
					<!-- <Weather /> -->
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { getCurrentTime } from "@/utils/util";
// import Music from "@/components/Music/index.vue";
import Hitokoto from "../Hitokoto/index.vue";
// import Weather from "@/components/Weather/index.vue";
interface currentTimeProps {
	year: Number | String;
	month: Number | String;
	day: Number | String;
	weekday: String;
	hour: Number | String;
	minute: Number | String;
	second: Number | String;
}
// 当前时间
let currentTime = ref<currentTimeProps>({
	year: "0000",
	month: "00",
	day: "00",
	weekday: "周日",
	hour: "00",
	minute: "00",
	second: "00"
});
const timeInterval = ref();

onMounted(() => {
	timeInterval.value = setInterval(() => {
		currentTime.value = getCurrentTime();
	}, 1000);
});

onBeforeUnmount(() => {
	clearInterval(timeInterval.value);
});
</script>

<style lang="scss" scoped>
.function {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 165px;
	&.mobile {
		.el-row {
			.el-col {
				&:nth-of-type(1) {
					display: contents;
				}
				&:nth-of-type(2) {
					display: none;
				}
			}
		}
	}
	.el-row {
		width: 100%;
		height: 100%;
		margin: 0 !important;
		.el-col {
			&:nth-of-type(1) {
				padding-left: 0 !important;
			}
			&:nth-of-type(2) {
				padding-right: 0 !important;
			}
			@media (max-width: 910px) {
				&:nth-of-type(1) {
					display: none;
				}
				&:nth-of-type(2) {
					flex: none;
					width: 100%;
					max-width: none;
					padding: 0 !important;
				}
			}
		}
		.left,
		.right {
			width: 100%;
			height: 100%;
		}
		.right {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			padding: 20px;
			animation: fade 0.5s;
			animation: fade;
			.time {
				font-size: 1.1rem;
				text-align: center;
				.date {
					overflow-x: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.text {
					margin-top: 10px;
					font-family: UnidreamLED;
					font-size: 3.25rem;
					letter-spacing: 2px;
				}
			}
			.weather {
				width: 100%;
				overflow-x: hidden;
				text-align: center;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}
</style>
